<template>
	<view>
		<view class="prj_imgs">
			<view class="prj_imgs_content" v-for="(item,index) in getImg" :key="index" @click="clickImg(item)">
				<fileImage :src="item.filePath_T" :className="['prj_img_detail']" />
				<view class="video-icon" v-if="item.fileShow">
					<view>
						<uni-icons type="videocam" size="50" color="#fff"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		CurrentRouter
	} from '@/config/CurrentRouter.js'
	export default {
		data() {
			return {
				getImg: [],
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log('option', option.pieceName); //打印出上个页面传递的参数。
			uni.setNavigationBarTitle({
				title: option.types
			})
			uni.setNavigationBarTitle({
				title: option.pieceName
			})
			this.getImg = JSON.parse(option.arr).map(v => {
				console.log(v);
				let s = v.filePath_W.slice(v.filePath_W.length - 4, v.filePath_W.length)
				v.fileShow = s === ".mp4" ? true : false
				return v
			})
			// console.log('跳转前转过json的', this.getImg);
		},
		methods: {
			clickImg(index) {
				let userCode = CurrentRouter({})
				if (userCode) return
				console.log(index);
				uni.navigateTo({
					url: './imgRepairOrQualified?arr=' + JSON.stringify(index) + '&arr2=' + JSON.stringify(this
						.getImg)
				});
			},

			// fileType(code) {
			// 	let num = -1
			// 	let list = ['mp4', 'webm', 'ogg']
			// 	list.forEach(item => {
			// 		console.log(item);
			// 		if (code.indexOf(item) != -1) {
			// 			num++
			// 		}
			// 	})
			// 	console.log(num);

			// 	this.getImg.forEach(el => {
			// 		if (num != -1) {
			// 			Object.assign(el, {
			// 				fileShow: true
			// 			})
			// 		} else {
			// 			Object.assign(el, {
			// 				fileShow: false
			// 			})
			// 		}
			// 	})

			// 	return num == -1 ? false : true
			// },


		}
	}
</script>
<style lang="scss" scoped>
	.prj_imgs_content {
		position: relative;
		padding: 20rpx 0 30rpx 0;

		.video-icon {
			position: absolute;
			top: 0;
			z-index: 99;
			position: absolute;
			width: 150rpx;
			height: 150rpx;
			margin-top: 10rpx;
			border-radius: 10rpx;

			view {
				vertical-align: middle;
				display: table-cell;
				text-align: center;
				width: 150rpx;
				height: 150rpx;
				background-color: rgba(51, 51, 51, .6);
				border-radius: 10rpx;
			}
		}
	}
</style>
<style>
	.prj_imgs {
		background-color: #fff;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.prj_img_detail {
		width: 150rpx;
		height: 150rpx;
		display: inline-block;

	}

	.prj_imgs_content {
		display: inline-block;
		width: 150rpx;
		height: 150rpx;
		margin-left: 35rpx;
		margin-top: 10rpx;

	}
</style>
